<?php
header("content-type:text/html;charset=utf-8");
//引发封装号的类文件
require "Db.php";

//实例化类
$obj = new Db();

//调用类里面的显示方法
$data = $obj -> show("exam");


?>
<center>
    <table>
        <tr>
            <th><input type="checkbox"></th>
            <th>编号</th>
            <th>客户名称</th>
            <th>负责人</th>
            <th>公司电话</th>
            <th>描述</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <?php foreach($data as $val){ ?>
            <tr id="<?= $val['id']?>">
                <td><input type="checkbox"></td>
                <td><?php echo $val['num'] ?></td>
                <td><span id="bb"><?= $val['name'] ?></span><input type="text" style="display: none" id="aa"></td>
                <td><?= $val['people'] ?></td>
                <td><?= $val['tel'] ?></td>
                <td><?= $val['content'] ?></td>
                <td>未分配</td>
                <td><a href="del.php?id=<?= $val['id']?>">删除</a></td>
            </tr>
        <?php } ?>
    </table>
</center>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('tr:even').has('td').css('background-color', 'skyblue');
        $('tr:odd').has('td').css('background-color', 'pink');
        $('tr').has('th').css('background-color', 'red');

        $(document).on("click","#bb",function(){
            var name = $(this).html();
            $(this).hide();
            $(this).next().show().focus().val(name);
        })

        $(document).on("blur","#aa",function(){
            var id = $(this).parents("tr").attr("id");
            var new_name = $(this).val();
            // alert(new_name);
            var _this = $(this);
            $.ajax({
                url:"upd.php",
                data:{id:id,new_name:new_name},
                dataType:"json",
                type:"post",

                success:function(e){
                    if(e == 1){
                        // alert("修改成功");
                        _this.hide();
                        _this.prev().show().html(_this.val());
                    }
                }
            })

        })

    });




</script>
